<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>双色球30期趋势图</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }

      .wrapper {
        display: inline-block;
        position: relative;
        width: auto;
      }

      .table {
        position: sticky;
        top: 0;
        z-index: 1;
        border-collapse: collapse;
      }

      th,
      td {
        width: 20px;
        height: 20px;
        min-width: 20px;
        max-width: 20px;
        text-align: center;
        margin: 0;
        padding: 0;
        outline: none;
        border: none;
        box-sizing: border-box;
      }
      tr{
        border-bottom: 1px solid #00000050;
      }

      .blue-td {
        background-color: blue;
        color: #ffffff;
      }
      .my-svg {
        display: inline-flex;
        position: absolute;
        top: 0;
        background-color: transparent;
        z-index: 2;
      }
      .code {
        width: 100px;
        height: 20px;
        min-width: 100px;
        max-width: 100px;
      }
    </style>
  </head>

  <body>
    <div class="wrapper">
      <table class="table">
        <thead>
          <tr>
            <td class="code" style="height: 20px !important">期号</td>
            <% for (let i=1; i <=33; i++) {%>
            <td
              style="
                height: 20px !important;
                background-color: red;
                color: #ffffff;
              "
            >
              <%- i < 10 ?'0'+i:i %>
            </td>
            <% } %> <% for (let i=1; i <=16; i++) {%>
            <td class="blue-td first-child" style="height: 20px !important">
              <%- i < 10 ?'0'+i:i %>
            </td>
            <% } %>
          </tr>
        </thead>
        <tbody style="position: relative">
          <% Object.values(content).forEach(item=> {%>
          <tr>
            <td class="code" style="height: 20px !important">
              <%- item.code %>
            </td>
            <% for (let i=1; i <=33; i++) {%>
            <!-- 红球 -->
            <% if(item.redIdxs.includes(i)){ %>
            <td style="border: none; cursor: pointer; height: 20px !important">
              <%- i %>
            </td>
            <% }else{ %>
            <td style="height: 20px !important"></td>
            <% } %> <% } %>
            <!-- 蓝球 -->
            <% for (let i=1; i <=16; i++) {%> <% if(item.blue===i){ %>
            <td
              style="
                height: 20px !important;
                background-color: blue;
                color: #ffffff;
                cursor: pointer;
              "
            >
              <%- item.blue %>
            </td>
            <% }else{ %>
            <td style="height: 20px !important"></td>
            <% } %> <% } %>
          </tr>
          <%}) %>
        </tbody>
      </table>
      <svg class="my-svg" width="100%" height="100%">
        <% redLines.forEach((item,index) => { %>
        <polyline
          points="<%- item.toString() %>"
          fill="none"
          stroke="<%- linesColor[index] + '50' %>"
          stroke-width="8"
          id="<%- 'red'+index %>"
          class="redLine"
          style="cursor: pointer"
        />
        <% }) %> <% redPoints.forEach((item1,index) => {%> <%
        item1.forEach((item2) => {%>
        <circle
          cx="<%- item2.split(',')[0] %>"
          cy="<%- item2.split(',')[1] %>"
          r="4"
          fill="<%- linesColor[index] %>"
          id="<%- 'red'+index+''+index %>"
          class="redPoint"
        ></circle>
        <%}) %> <%}) %>

        <polyline
          points="<%- blueLiens %>"
          fill="none"
          stroke="blue"
          stroke-width="4"
        />
      </svg>
      <div style="position: fixed; right: 0; top: 0; width: 50px">
        <% linesColor.forEach((color,index) => { %>
        <div
          id="<%- 'oper' + index %>"
          style=<%- 'background-color:' + color + '50;user-select:none;width:50px;height:50px;border-radius:50%;line-height:50px;text-align:center;font-size:10px;cursor:pointer;' %>
        >
          <%- index + 1 + '号红球' %>
        </div>
        <% }) %>
      </div>
    </div>
    <script>
      (() => {
        const redLiens = Array.from(document.getElementsByClassName("redLine"));
        const redPoints = Array.from(
          document.getElementsByClassName("redPoint")
        );
        let curOperId = "";
        for (let i = 0; i < 7; i++) {
          ((i) => {
            const id = "red" + i;
            const pointId = "red" + i + "" + i;
            const operId = "oper" + i;
            let resLine = document.getElementById(id);
            let redPoint = document.getElementById(pointId);
            let operDom = document.getElementById(operId);

            let flag = true;
            resLine &&
              resLine.addEventListener(
                "click",
                () => {
                  renderLine();
                },
                false
              );

            operDom &&
              operDom.addEventListener(
                "click",
                () => {
                  if (curOperId !== operId && !flag) {
                    flag = true;
                  }
                  if (flag) {
                    redLiens.forEach((_resLine) => {
                      _resLine.style.visibility = "visible";
                    });
                    redPoints.forEach((_resPonit) => {
                      _resPonit.style.visibility = "visible";
                    });
                  }
                  renderLine();
                  curOperId = operId;
                },
                false
              );

            function renderLine() {
              redLiens.forEach((_resLine) => {
                if (flag) {
                  if (_resLine.getAttribute("id") !== id) {
                    _resLine.style.visibility = "hidden";
                  }
                } else {
                  _resLine.style.visibility = "visible";
                }
              });
              redPoints.forEach((_resPonit) => {
                if (flag) {
                  if (_resPonit.getAttribute("id") !== pointId) {
                    _resPonit.style.visibility = "hidden";
                  }
                } else {
                  _resPonit.style.visibility = "visible";
                }
              });
              flag = !flag;
            }
          })(i);
        }


        window.addEventListener('resize', (ev) => {
          console.log(ev)
        }, false)
      })();
    </script>
  </body>
</html>
